<html>
	<head>
		<title>AZone社交-个人中心</title>
		<link rel="stylesheet" href="/css/JanGrid.css" />
		<link rel="stylesheet" href="/css/JanAnimation.css" />
		<link rel="stylesheet" href="/css/fa.css" />
		<link rel="stylesheet" href="/css/app.css" />
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="/css/user_center.css" />
	</head>
	<body>
		<div class="mask row center" id="modal" style="margin: 0">
			<div class="col-xs-4 col-sm-3">
				<div class="modal-card" id="modal-card">
					<div class="modal-card-title" id="modal-title"></div>
					<div class="modal-card-content" id="modal-content"></div>
					<button class="button success modal-card-button" id="modal-button">关闭</button>
				</div>
			</div>
		</div>
		<div class="navbar">
			<div class="title">AZone社交空间</div>
			<div class="menu">
				<a href="/html/index.html">动态首页</a>
				<a href="/html/album.html">个人相册</a>
				<a href="/html/user_center.html" focus>个人中心</a>
				<a href="/html/login.html?logout">退出登录</a>
			</div>
		</div>

		<h1 id="title">个人中心</h1>
		<div class="row">
			<div class="col-sm-3" id="news-area">
				<h2>动态管理</h2>
				<div class="news" id="news">
					<!-- 插槽 -->
				</div>
				<div class="news-controller">
					<i class="far fa-arrow-alt-circle-up" id="page-home"></i>
					<i class="far fa-arrow-alt-circle-left" id="page-backwards"></i>
					<div id="news-controller-state"></div>
					<i class="far fa-arrow-alt-circle-right" id="page-forwards"></i>
				</div>
			</div>
			<div class="col-sm-3" id="settings-area">
				<h2>个人设置</h2>
				<div class="card">
					<div class="row">
						<div class="col-sm-2"><img id="user-avatar" /></div>
						<div class="col-sm-4">
							<div class="panel">给你的头像换个新装<input type="file" id="upload-pic" accept=".jpg,.gif,.jpeg,.png" /></div>
						</div>
					</div>
				</div>

				<div class="card" style="padding-bottom: 30px">
					<h2>修改密码</h2>
					<div class="field">请输入旧密码<input type="password" class="input" id="old-pwd" /></div>
					<div class="field">请输入新密码<input type="password" class="input" id="new-pwd" /></div>
					<div class="field">请再输入一次新密码<input type="password" class="input" id="new-pwd2" /></div>
					<button class="button success card-button" style="height: 30px; width: 130px; font-size: 16px; font-weight: 430" id="submit-pwd-change">提交</button>
				</div>
			</div>
		</div>
	</body>
	<script src="/js/user_center.js" type="module"></script>
</html>
